<ion-header>
    <ion-toolbar color="customblue">
        <ion-buttons slot="start">
            <ion-back-button class="back-icon" text="" defaultHref="/"></ion-back-button>
        </ion-buttons>
        <ion-title>订单详情</ion-title>
    </ion-toolbar>
</ion-header>

<ion-content>
    <!-- <img src="../../../assets/image/cx_zd.png"> -->
    <ul class="timeUl">
        <li class="timeLi" *ngFor="let item of orderTime; let e = index">
            <div class="time1" [ngClass]="{'times': e == orderTime.length-1}">
                <p *ngFor="let i of item.createDate">{{i}}</p>
            </div>
            <div class="time2" [ngClass]="{'times': e == orderTime.length-1}">
                <p>{{item.notaryStateName}}</p>
                <p>{{item.reason}}</p>
                <div class="time2-div" [ngClass]="{'times2': e == orderTime.length-1}"></div>
                <img src="../../../assets/image/ico_time_01_selected.png" *ngIf="e == orderTime.length-1 && item.notaryState == 10" class="time2-img" alt="">
                <img src="../../../assets/image/ico_time_02_selected.png" *ngIf="e == orderTime.length-1 && item.notaryState == 68" class="time2-img" alt="">
                <img src="../../../assets/image/ico_time_03_selected.png" *ngIf="e == orderTime.length-1 && item.notaryState == 70" class="time2-img" alt="">
                <img src="../../../assets/image/ico_time_04_selected.png" *ngIf="e == orderTime.length-1 && item.notaryState == 92" class="time2-img" alt="">
                <img src="../../../assets/image/ico_time_01.png" *ngIf="e !== orderTime.length-1 && item.notaryState == 10" class="time2-img" alt="">
                <img src="../../../assets/image/ico_time_02.png" *ngIf="e !== orderTime.length-1 && item.notaryState == 68" class="time2-img" alt="">
                <img src="../../../assets/image/ico_time_03.png" *ngIf="e !== orderTime.length-1 && item.notaryState == 70" class="time2-img" alt="">
                <img src="../../../assets/image/ico_time_04.png" *ngIf="e !== orderTime.length-1 && item.notaryState == 92" class="time2-img" alt="">
            </div>
        </li>

    </ul>
    <div class="order-bgc"></div>
    <div class="order-info">基本信息</div>
    <div>
        <div class="order-info1">
            <p>申请号</p>
            <p>{{order.orderNo}}</p>
        </div>
        <!-- <div class="order-info1"><p>服务机构</p><p>{{order.notaryName}}</p></div> -->
        <div class="order-info1">
            <p>公证事项</p>
            <p>{{order.notaryItemNames}}</p>
        </div>
        <div class="order-info1">
            <p>申请时间</p>
            <p>{{order.createDate}}</p>
        </div>
        <div class="order-info1">
            <p>支付状态</p>
            <p>{{order.notaryStateName}}</p>
        </div>
    </div>
    <div class="order-bgc"></div>
    <div class="order-info">申请人信息</div>
    <div *ngFor="let item of applyuser">
        <div class="order-info1">
            <p>姓名</p>
            <p>{{item.name}}</p>
        </div>
        <div class="order-info1">
            <p>证件类型</p>
            <p>身份证</p>
        </div>
        <div class="order-info1">
            <p>证件号码</p>
            <p>{{item.idCard}}</p>
        </div>
        <div class="order-info1">
            <p>性别</p>
            <p>{{item.gender}}</p>
        </div>
        <div class="order-info1">
            <p>出生日期</p>
            <p>{{item.birthday}}</p>
        </div>
        <div class="order-info1">
            <p>电话</p>
            <p>{{item.mobile}}</p>
        </div>
        <div class="order-info1" *ngIf="item.address !== null">
            <p>地址</p>
            <p>{{item.address}}</p>
        </div>
    </div>
    <div class="order-bgc"></div>
    <div class="order-info">公证费用</div>
    <div>
        <div *ngIf="isleixing == 2">
            <div class="order-info1" *ngFor="let item of notaryItems">
                <p>{{item.notaryItemName}}x{{item.notaryNum}}</p>
                <p>￥{{item.price}}元</p>
            </div>
        </div>
        <div *ngIf="isleixing == 1">
            <div class="order-info1" *ngFor="let item of notaryItems">
                <p>{{item.notaryItemName}}x{{item.notaryNum}}</p>
                <p>￥{{ !!order.fee ? order.fee : 0}}元</p>
            </div>
        </div>
        <span *ngIf="notaryItems == null && isleixing == 2" class="online-img2">暂无数据</span>
        <span *ngIf="order.fee == '' && isleixing == 1" class="online-img2">暂无数据</span>
    </div>
    <div class="order-bgc"></div>
    <div class="order-info">材料</div>
    <div class="online-img">

        <div class="online-img1" *ngFor="let items of materials">
            <img [src]="i.filePath" *ngFor="let i of items.annexs" (click)="imgClick(i.filePath)" />
        </div>
        <span *ngIf="materials == null" class="online-img2">暂无数据</span>
    </div>
    <div class="imgslides" *ngIf="isShowimg">
        <div class="imgslides-icon" (click)="iconclick()">
            <ion-icon name="close-outline"></ion-icon>
        </div>
        <img [src]="orderImglist" class="imgslides-img">
    </div>
    <div class="order-info">费用补缴</div>
    <div class="bj_box" *ngFor="let item of orderSupplements">
        <div class="info_box">
            <span>补缴金额</span>
            <span>{{ item.supplementFee }}</span>
        </div>
        <div class="bj_imgbox">
            <img *ngFor="let i of item.imagePathBack" :src="i" alt="">
        </div>
    </div>
</ion-content>

<!-- <ion-footer>
  <ion-toolbar class="order-toolbar">
    <ion-button fill="outline" class="order-btn btn-color" (click)="repealOn()" *ngIf="notaryState!=='92'">撤销</ion-button>
    <ion-button fill="outline" class="order-btn" *ngIf="notaryStateName=='待申请'">继续申办</ion-button>
    <ion-button fill="outline" class="order-btn" *ngIf="notaryStateName=='已受理'">去付款</ion-button>
    <ion-button fill="outline" class="order-btn" *ngIf="notaryStateName=='已完成'">开发票</ion-button>
  </ion-toolbar>
</ion-footer> -->